<template>
  <div>
    <ul>
      <li v-for="item in resultList" :key="item.id">
        <img :src="item.picUrl">
        <span>{{item.name}}</span>
        <span>{{getSinger(item.artists)}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {searchAPI} from '@/api'
export default {
    name:'AlbumRes',
    data() {
      return {
        resultList:[]
      }
    },
    methods:{
      async getResult(){
        const res = await searchAPI({keywords: this.keywords, type: 10 ,limit:100});
        this.resultList = res.data.result.albums;
      },
       getSinger(arr){
     let singers = '';
     arr.forEach(item=>{
       singers+=item.name;
       singers+='/';
     })
     return singers.slice(0,-1)
   }
    },
    computed:{
      keywords(){
        return this.$store.state.search.searchWord;
      }
   },
  
   created(){
     this.getResult();
   }
}
</script>

<style lang="less" scoped>
ul{
  li{
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    font-size: 16px;
    display: flex;
    position: relative;
    cursor: pointer;
    img{
      width: 60px;
      height: 60px;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 4px;
    }
    span{
      display: block;
      margin-left: 10px;
      width: 240px;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    span:nth-child(3){
      position: absolute;
      left: 350px;
      font-size: 13px;
      color: #999;
      top: 0px;
    }
  }
  li:nth-child(2n){
    background-color: rgb(249,249,249);
  }
  li:hover{
    background-color: rgb(240,241,242);
  }
}
</style>